<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<div th:replace="/common/header :: header"></div>
<body>

<div class="home_bac">
	<!--头部-->
	<div th:replace="/pc/home/common :: header"></div>
	<div class="home_mol"  >
		<!--Guest 游客数据 通用数据-->
		<div class="home_mtab"   id="app">
			<p class="home_tit">Information  Center</p>
			<ul class="home_bot">
				<!--<li class="clearfix">-->
				<!--<p class="home_pfl">User_id</p>-->
				<!--<p class="home_pfr">13574258452</p>-->
				<!--</li>-->
				<li class="clearfix">
					<p class="home_pfl">Phone</p>
					<p class="home_pfr">{{currentUser.phone}}</p>
				</li>
				<li class="clearfix">
					<p class="home_pfl">User Email</p><!--  -->
                    <div class="clearfix home_ipu">
                        <input type="text" v-model="currentUser.user_email" class="home_input" placeholder="User Email">
                    </div>
				</li>
				<!--<li class="clearfix" th:if="${role_id == 5}">
					<p class="home_pfl">Real Name</p>
					<div class="clearfix home_ipu">
						<input type="text" v-model="currentUser.avatar" class="home_input" placeholder="Real Name">
					</div>
				</li>-->
				<li class="clearfix">
					<p class="home_pfl">New Password</p>
					<div class="clearfix home_ipu">
						<input type="password" v-model="currentUser.password" class="home_input" placeholder="New Password">
					</div>
				</li>
				<li class="clearfix">
					<p class="home_pfl">Confirm Password</p>
					<div class="clearfix home_ipu">
						<input type="password" v-model="confirm_password" class="home_input" placeholder="Confirm Password">
					</div>
				</li>
				<!--<li class="clearfix">-->
				<!--<p class="home_pfl">Confirm_email</p>-->
				<!--<div class="clearfix home_ipu">-->
				<!--<input type="text" class="home_input">-->
				<!--</div>-->
				<!--</li>-->

				<li class="clearfix">
					<p class="home_pfl">Contact Num 1</p>
					<div class="clearfix home_ipu">
						<input type="type" v-model="currentUser.contact_num1" class="home_input" placeholder="Contact Num 1">
					</div>
				</li>
				<li class="clearfix">
					<p class="home_pfl">Contact Num 2</p>
					<div class="clearfix home_ipu">
						<input type="type" v-model="currentUser.contact_num2" class="home_input" placeholder="Contact Num 2">
					</div>
				</li>
				<li class="clearfix">
					<p class="home_pfl">Suburb</p><!-- 家庭地址 国籍 籍贯 例如：China XI’AN -->
					<div class="clearfix home_ipu">
						<input type="type" v-model="currentUser.suburb" class="home_input" placeholder="Suburb">
					</div>
				</li>
				<li class="clearfix">
					<p class="home_pfl">Guest C Point</p><!--积分 游客消费金额/积分(能根据活动增减)-->
					<p class="home_pfr">{{currentUser.guest_credit_point}}</p>
				</li>
				<li class="clearfix">
					<p class="home_pfl">GuestCPAll</p><!--累积积分 游客消费金额/积分(只增不减) 对应旧系统memmber_sum_credit字段-->
					<p class="home_pfr">{{currentUser.guest_credit_point_all}}</p>
				</li>
				<li class="clearfix">
					<p class="home_pfl">Guest C Earned</p><!--游客信用 由司机对游客的评价-->
					<p class="home_pfr">{{currentUser.guest_credit_earned}}</p>
				</li>
				<li class="clearfix">
					<p class="home_pfl">Guest Level</p><!--游客会员等级-->
					<p class="home_pfr">{{currentUser.cust_level}}</p>
				</li>
				<li class="clearfix">
					<p class="home_pfl">Guest Rate D</p><!--折扣 默认1   100%  根据积分而来-->
					<p class="home_pfr">{{currentUser.guest_rate_discount}}</p>
				</li>






				<!--driver 司机额外数据-->
				<li class="clearfix" th:if="${role_id == 4}">
					<hr>
				</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Driver Lic</p><!--驾驶证号码-->
					<div class="clearfix home_ipu">
						<input type="text" v-model="currentUser.driver.driver_lic"  class="home_input" placeholder="Car_brand">
					</div>
				</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Driver Lic Img1</p><!--驾驶证 正面-->
					<div class="clearfix home_ipu">
						<input type="hidden" v-model="currentUser.driver.driver_lic_img1"  class="home_input" placeholder="driver_lic_img1">

						<div class="home_input">
							<button type="button" class="layui-btn" id="driver_lic_img1">
								<i class="layui-icon">&#xe67c;</i>{{currentUser.driver.driver_lic_img1? '修改驾驶证正面图片' : '上传驾驶证正面图片'}}
							</button>
							<img :src="currentUser.driver.driver_lic_img1" alt="driver_lic_img1" width="100px" height="100px">
						</div>

					</div>
				</li><li class="clearfix" th:if="${role_id == 4}">
				<p class="home_pfl">Driver Lic Img2</p><!--驾驶证 反面-->
				<div class="clearfix home_ipu">
					<input type="hidden" v-model="currentUser.driver.driver_lic_img2"  class="home_input" placeholder="driver_lic_img2">

					<div class="home_input">
						<button type="button" class="layui-btn" id="driver_lic_img2">
							<i class="layui-icon">&#xe67c;</i>{{currentUser.driver.driver_lic_img2? '修改驾驶证反面图片' : '上传驾驶证反面图片'}}
						</button>
						<img :src="currentUser.driver.driver_lic_img2" alt="driver_lic_img2" width="100px" height="100px">
					</div>

				</div>
			</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Car Brand</p><!--车-品牌-->
					<div class="clearfix home_ipu">
						<input type="text" v-model="currentUser.driver.car_brand"  class="home_input" placeholder="Car_brand">
					</div>
				</li>

				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Car Seat</p><!--车的座位数量-->
					<div class="clearfix home_ipu">
						<input type="text" v-model="currentUser.driver.car_seat"  class="home_input" placeholder="Car_tyle">
					</div>
				</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Car Plate</p><!--车牌号-->
					<div class="clearfix home_ipu">
						<input type="text" v-model="currentUser.driver.car_plate" class="home_input" placeholder="Car_plate">
					</div>
				</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Driver Lic Expired</p><!--驾照过期日-->
					<div class="clearfix home_ipu" >
						<input type="text" v-model="currentUser.driver.driver_lic_expired" class="home_input" placeholder="Driver Lic Expired" id="driver_lic_expired">
						<img src="images/a12.png" class="home_rli">
					</div>
				</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Car Year</p><!--车龄-->
					<div class="clearfix home_ipu">
						<input type="text" v-model="currentUser.driver.car_year" class="home_input" placeholder="Car_year">
						<!--<img src="images/a12.png" class="home_rli">-->
					</div>
				</li>
				<!--<li class="clearfix">-->
				<!--<p class="home_pfl">User_license</p>-->
				<!--<div class="clearfix home_ipu">-->
				<!--<input type="text" class="home_input">-->
				<!--</div>-->
				<!--</li>-->
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Busdriver Lic</p><!--大巴车驾照-->
					<div class="clearfix home_ipu">
						<input type="text" v-model="currentUser.driver.bus_driver_lic" class="home_input" placeholder="Busdriver_lic">
						<!--<img src="images/a12.png" class="home_rli">-->
					</div>
				</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Busdriver Expired</p><!--大巴车驾照 证件过期日-->
					<div class="clearfix home_ipu" >
						<input type="text" v-model="currentUser.driver.bus_driver_lic_expired" class="home_input" placeholder="Busdriver_expired" id="bus_driver_lic_expired">
						<img src="images/a12.png" class="home_rli">
					</div>
				</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Car Fuel</p><!--燃油  油耗-->
					<div class="clearfix home_ipu">
						<input type="text" v-model="currentUser.driver.car_fuel" class="home_input" placeholder="car_fuel">
					</div>
				</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Car Cost</p><!--每公里的用车成本-->
					<div class="clearfix home_ipu">
						<input type="text" v-model="currentUser.driver.car_cost" class="home_input" placeholder="car_cost">
					</div>
				</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Car km</p><!--每公里的用车成本-->
					<div class="clearfix home_ipu">
						<input type="text" v-model="currentUser.driver.car_km" class="home_input" placeholder="car_km">
					</div>
				</li>
				<li class="clearfix layui-form" th:if="${role_id == 4}">
					<p class="home_pfl">Insur Type</p><!--保险类型-->
					<div class="clearfix home_ipu">
<!--						<input type="text" v-model="currentUser.driver.insur_type" class="home_input" placeholder="Insur_type">-->
						<select lay-filter="insur_type" v-model="currentUser.driver.insur_type">
							<option value="0" selected="selected" >Third Party</option>
							<option value="1" selected="selected" >Comprehensive</option>
						</select>
					</div>
				</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">CTP Expired Date</p><!--保险过期日-->
					<div class="clearfix home_ipu">
						<input type="text" v-model="currentUser.driver.insur_expired" class="home_input" placeholder="Insur_expired" id="insur_expired">
						<img src="images/a12.png" class="home_rli">
					</div>
				</li>
				<!--保险照片正面 insur_img1-->
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Insur Img1</p>
					<div class="clearfix home_ipu">
						<input type="hidden" v-model="currentUser.driver.insur_img1"  class="home_input" placeholder="insur_img1">

						<div class="home_input">
							<button type="button" class="layui-btn" id="insur_img1">
								<i class="layui-icon">&#xe67c;</i>{{currentUser.driver.insur_img1? '修改保险正面图片' : '上传保险正面图片'}}
							</button>
							<img :src="currentUser.driver.insur_img1" alt="insur_img1" width="100px" height="100px">
						</div>

					</div>
				</li>

				<!--保险照片反面 insur_img2-->
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Insur Img2</p>
					<div class="clearfix home_ipu">
						<input type="hidden" v-model="currentUser.driver.insur_img2"  class="home_input" placeholder="insur_img2">

						<div class="home_input">
							<button type="button" class="layui-btn" id="insur_img2">
								<i class="layui-icon">&#xe67c;</i>{{currentUser.driver.insur_img2? '修改保险反面图片' : '上传保险反面图片'}}
							</button>
							<img :src="currentUser.driver.insur_img2" alt="insur_img2" width="100px" height="100px">
						</div>
					</div>
				</li>

				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Server Credit Point</p><!--司机的积分-->
					<p class="home_pfr">{{currentUser.driver.server_credit_point}}</p>
				</li>
				<li class="clearfix" th:if="${role_id == 4}">
					<p class="home_pfl">Server Credit Earned</p><!--司机信用 由游客对司机的评价-->
					<p class="home_pfr">{{currentUser.driver.server_credit_earned}}</p>
				</li>






				<!--carrier 承运商额外数据-->
				<li class="clearfix" th:if="${role_id == 3}">
					<hr>
				</li>

                <li class="clearfix" th:if="${role_id == 3}">
                    <p class="home_pfl">Carrier Name</p><!--承运商名称-->
                    <div class="clearfix home_ipu">
                        <input type="text" v-model="currentUser.carrier.carrier_name" class="home_input" placeholder="carrier_name">
                        <!--<img src="images/a12.png" class="home_rli">-->
                    </div>
                </li>
                <li class="clearfix" th:if="${role_id == 3}">
                    <p class="home_pfl">Carrier Lic</p><!--承运商营业执照 经营执照-->
                    <div class="clearfix home_ipu">
                        <input type="text" v-model="currentUser.carrier.carrier_lic" class="home_input" placeholder="carrier_lic">
                        <!--<img src="images/a12.png" class="home_rli">-->
                    </div>
                </li>
				<!--Carrier证书图片-正-->
				<li class="clearfix" th:if="${role_id == 3}">
					<p class="home_pfl">carrier_lic_img1</p>
					<div class="clearfix home_ipu">
						<input type="hidden" v-model="currentUser.carrier.carrier_lic_img1"  class="home_input" placeholder="insur_img2">

						<div class="home_input">
							<button type="button" class="layui-btn" id="carrier_lic_img1">
								<i class="layui-icon">&#xe67c;</i>{{currentUser.carrier.carrier_lic_img1? '修改Carrier证书图片-正' : '上传Carrier证书图片-正'}}
							</button>
							<img :src="currentUser.carrier.carrier_lic_img1" alt="carrier_lic_img1" width="100px" height="100px">
						</div>
					</div>
				</li>
				<!--Carrier证书图片-反-->
				<li class="clearfix" th:if="${role_id == 3}">
					<p class="home_pfl">carrier_lic_img2</p>
					<div class="clearfix home_ipu">
						<input type="hidden" v-model="currentUser.carrier.carrier_lic_img2"  class="home_input" placeholder="insur_img2">

						<div class="home_input">
							<button type="button" class="layui-btn" id="carrier_lic_img2">
								<i class="layui-icon">&#xe67c;</i>{{currentUser.carrier.carrier_lic_img2? '修改Carrier证书图片-反' : '上传Carrier证书图片-反'}}
							</button>
							<img :src="currentUser.carrier.carrier_lic_img2" alt="carrier_lic_img2" width="100px" height="100px">
						</div>
					</div>
				</li>




                <li class="clearfix" th:if="${role_id == 3}">
                    <p class="home_pfl">Carrier Lic Expired</p><!--大巴车驾照 证件过期日-->
                    <div class="clearfix home_ipu" >
                        <input type="text" v-model="currentUser.carrier.carrier_lic_expired" class="home_input" placeholder="carrier_lic_expired" id="carrier_lic_expired">
                        <img src="images/a12.png" class="home_rli">
                    </div>
                </li>
                <li class="clearfix" th:if="${role_id == 3}">
                    <p class="home_pfl">Server Credit Point</p><!--司机的积分-->
                    <p class="home_pfr">{{currentUser.carrier.server_credit_point}}</p>
                </li>
                <li class="clearfix" th:if="${role_id == 3}">
                    <p class="home_pfl">Server Credit Earned</p><!--司机信用 由游客对司机的评价-->
                    <p class="home_pfr">{{currentUser.carrier.server_credit_earned}}</p>
                </li>



				<li class="clearfix">
<!--					<p class="home_pfl"></p>-->
					<!--<input type="button" class="home_button" value="Modify your information">-->
					<div  class="home_button" v-on:click="save">Modify your information</div>
				</li>
			</ul>
		</div>



		<!--底部菜单-->
		<div th:replace="/pc/home/common :: home_foot"></div>
	</div>



</div>


<script>
// nav
$(document).ready(function($){
	$('.cd-3d-nav-trigger').on('click', function(){
		toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
	});
	function toggle3dBlock(addOrRemove) {
		if(typeof(addOrRemove)==='undefined') addOrRemove = true;
		$('.cd-header').toggleClass('nav-is-visible', addOrRemove);
	}


});
</script>
<script th:inline="javascript">
	/*加载layui组件*/
	var laydate = null, laypage = null, layer = null, table = null, carousel = null, upload = null, element = null,form=null;
	layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element' ], function() {
			laydate = layui.laydate //日期
			, layer = layui.layer //弹层
			,form = layui.form
		//国际版
		laydate.render({
			elem: '#driver_lic_expired'
			,lang: 'en'
			,btns:[ 'now', 'confirm']
			,trigger: 'click' //采用click弹出
			,done: function(value, date, endDate){
				app.currentUser.driver.driver_lic_expired = value;
			}
			// ,value:new Date()
		});
		laydate.render({
			elem: '#carrier_lic_expired'
			,lang: 'en'
			,btns:[ 'now', 'confirm']
			,trigger: 'click' //采用click弹出
			,done: function(value, date, endDate){
				console.log(value); //得到日期生成的值，如：2017-08-18
				// console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				// console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
				app.currentUser.carrier.carrier_lic_expired = value;
			}
			// ,value:new Date()
		});
		laydate.render({
			elem: '#bus_driver_lic_expired'
			,lang: 'en'
			,btns:[ 'now', 'confirm']
			,trigger: 'click' //采用click弹出
			,done: function(value, date, endDate){
				app.currentUser.driver.bus_driver_lic_expired = value;
			}
			// ,value:new Date()
		});
		laydate.render({
			elem: '#insur_expired'
			,lang: 'en'
			,btns:[ 'now', 'confirm']
			,trigger: 'click' //采用click弹出
			,done: function(value, date, endDate){
				app.currentUser.driver.insur_expired = value;
			}
			// ,value:new Date()
		});
			var upload = layui.upload;

			//执行上传
			var uploadInst = upload.render({
				elem: '#driver_lic_img1' //绑定元素
				,url: Bus4uUtil.serverUrl+'/fileUpload/img' //上传接口
				,done: function(res){
					//上传完毕回调
					// console.log(res.result.url1)
					app.currentUser.driver.driver_lic_img1 = res.result.url
					console.log("app.currentUser.driver.driver_lic_img1 = "+app.currentUser.driver.driver_lic_img1)
					console.log(app)
				}
				,error: function(){
					//请求异常回调
					console.log("....")
				}
			});
			var uploadInst1 = upload.render({
				elem: '#driver_lic_img2' //绑定元素
				,url: Bus4uUtil.serverUrl+'/fileUpload/img' //上传接口
				,done: function(res){
					//上传完毕回调
					// console.log(res.result.url1)
					app.currentUser.driver.driver_lic_img2 = res.result.url
					console.log("app.currentUser.driver.driver_lic_img2 = "+app.currentUser.driver.driver_lic_img2)
					console.log(app)
				}
				,error: function(){
					//请求异常回调
					console.log("....")
				}
			});
			var uploadInst3 = upload.render({
				elem: '#insur_img1' //绑定元素
				,url: Bus4uUtil.serverUrl+'/fileUpload/img' //上传接口
				,done: function(res){
					//上传完毕回调
					// console.log(res.result.url1)
					app.currentUser.driver.insur_img1 = res.result.url
					console.log("app.currentUser.driver.insur_img1 = "+app.currentUser.driver.insur_img1)
					console.log(app)
				}
				,error: function(){
					//请求异常回调
					console.log("....")
				}
			});
			var uploadInst4 = upload.render({
				elem: '#insur_img2' //绑定元素
				,url: Bus4uUtil.serverUrl+'/fileUpload/img' //上传接口
				,done: function(res){
					//上传完毕回调
					// console.log(res.result.url1)
					app.currentUser.driver.insur_img2 = res.result.url
					console.log("app.currentUser.driver.insur_img2 = "+app.currentUser.driver.insur_img2)
					console.log(app)
				}
				,error: function(){
					//请求异常回调
					console.log("....")
				}
			});
			var uploadInst5 = upload.render({
				elem: '#carrier_lic_img1' //绑定元素
				,url: Bus4uUtil.serverUrl+'/fileUpload/img' //上传接口
				,done: function(res){
					//上传完毕回调
					// console.log(res.result.url1)
					app.currentUser.carrier.carrier_lic_img1 = res.result.url
					console.log("app.currentUser.carrier.carrier_lic_img1 = "+app.currentUser.carrier.carrier_lic_img1)
					console.log(app)
				}
				,error: function(){
					//请求异常回调
					console.log("....")
				}
			});
			var uploadInst6 = upload.render({
				elem: '#carrier_lic_img2' //绑定元素
				,url: Bus4uUtil.serverUrl+'/fileUpload/img' //上传接口
				,done: function(res){
					//上传完毕回调
					// console.log(res.result.url1)
					app.currentUser.carrier.carrier_lic_img2 = res.result.url
					console.log("app.currentUser.carrier.carrier_lic_img2 = "+app.currentUser.carrier.carrier_lic_img2)
					console.log(app)
				}
				,error: function(){
					//请求异常回调
					console.log("....")
				}
			});
		form.on('select(insur_type)', function(data){
			console.log(data);
			app.insur_type = data.value;

		});

	});
	var s = JSON.parse('[[${session.currentUser}]]');
    var user_update_url = Bus4uUtil.serverUrl+"pc/user/update";
	var app = new Vue({
		el:"#app",
		data:{
			currentUser:s,
			/*currentUser:{
				driver:{
					driver_lic:"http://www.jianiubank.com/admin/uploads/2019-11-09/201911091252_11106_7cc1b18d8c894d2ebafcdb90c1aaff51.jpg"
				}
			},*/
			confirm_password:''
		},
		methods: {
			save: function (event) {
				// `this` 在方法里指向当前 Vue 实例

				if(this.currentUser.password!=undefined && this.currentUser.password.trim()!="" && this.currentUser.password != this.confirm_password){
					layer.msg("Two different passwords");
					return false;
				}
				//执行修改用户信息
				$.ajax({
					url:user_update_url,
					type:"post",
					data:this.currentUser,
					success:function(d){
						if(d.code=="0"){
							layer.msg("修改成功")
						}else{
							layer.msg(d.msg)
						}
					}
				});
			}
		},
	});

</script>
</body>
</html>
